<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>PHPMall-用户登录</title>
    <link rel="stylesheet" href="/static/login/css/base_1.css"/>
    <link rel="stylesheet" href="/static/login/css/register.css"/>
    <script src="/static/index/js/jquery-2.1.4.min_1.js"></script>
    <script src="/static/layer/layer.js"></script>
</head>
<body>
<div id="main">
    <div id="header">
    </div>
    <div class="container">
        <div class="bgPic"><img src="/static/login/picture/b2_1.jpg" alt=""/></div>
        <div class="register">
            <div class="title">
                <span>登录</span>
                <a href="{:url('user/Login/register')}">去注册</a>
            </div>
            <form autocomplete="off">
                <div class="default">
                    <p>请输入用户名或手机号码</p>
                    <input id="uname" name="uname" data-form="uname" type="text" placeholder="用户名"/>
                </div>
                <div class="default">
                    <p>请输入账号密码</p>
                    <input id="upwd" name="upwd" data-form="upwd" type="password" placeholder="密码"/>
                </div>
                <div class="submit">
                        <span class="notice">
                            <a href="#">忘记密码</a>
                        </span>
                    <button class="s_hover" type="button" onclick="login()">登录</button>
                </div>
            </form>
            <div class="other_login">
                <div class="log">
                    <span>社交账号登录</span>
                </div>
                <div class="icon">
                    <ul>
                        <li data-log="icon" class="i_hover">
                            <img data-icon="wx" src="/static/login/picture/wx_1.png" alt=""/>
                            <span class="prompt" >微信登录</span>
                        </li>
                        <li data-log="icon" class="i_hover">
                            <img data-icon="qq" src="/static/login/picture/qq_1.png" alt=""/>
                            <span class="prompt" >QQ登录</span>
                        </li>
                        <li data-log="icon" class="i_hover">
                            <img data-icon="wb" src="/static/login/picture/wb_1.png" alt=""/>
                            <span class="prompt" >微博登录</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>
<script>
    function login() {
        // 用户名
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        var uPattern = /^[a-zA-Z0-9_-]{5,16}$/;
        var pass = /^\w{6,16}$/;
        if(!uPattern.test(uname)){
            layer.msg('用户名不正确', {
                icon: 5,
                skin: 'layer-ext-moon'
            });
            return;
        }
        if(upwd=='' || !pass.test(upwd)){
            layer.msg('请输入6-16位密码', {
                icon: 5,
                skin: 'layer-ext-moon'
            });
            return;
        }

        var url = "{:url('user/Login/HandleLogin')}";
        var postData ={"uname":uname,"upwd":upwd};
        $.post(url,postData,function (result) {
            if(result.error === 1 ){
                layer.msg(result.msg);
                location.href = "/";
            }else {
                layer.msg(result.msg, {
                    icon: 5,
                    skin: 'layer-ext-moon'
                });

            }
        },"json")

    }

</script>
</body>
</html>